<template>
<div class="header">
    <div class="header-top clearfix">
        <div class="header-login fl">
            <p @click="clickLogin">欢迎来到新华社印刷，请登录</p>
            <div class="border"></div>
            <p>免费注册</p>
        </div>
        <div class="header-list fr">
            <ul>
                   <li>
                    <img :src="imgData.place" alt=""> 北京</li>
                   <li>商城首页</li>
                   <li>我的订单</li>
                   <li>买家中心</li>
                   <li>卖家中心</li>
                    <div class="border"></div>
                   <li>收藏夹</li>
                   <li>客服中心</li>
                   <li>English</li>

            </ul>
        </div>
    </div>
    <div class="header-logo clearfix">
        <!-- <div class="container"> -->
        <div class="logo fl">
            <img :src="imgData.logo" alt="" @click="clickHome">
            <div class="border"></div>
            <p>欢迎注册</p>
        </div>

        <div class="service fr">
            <ul>
                <li v-for="(item,i) in safeData" :key="i">
                    <img :src="item.safe" alt="">
                    <p>{{item.value}}</p>
                </li>
            </ul>
        </div>
        <!-- </div> -->
    </div>
</div>
</template>

<script>
export default {
    name: 'RegisterHeader',
    data() {
        return {
            imgData: {
                place: require('@/assets/location.png'),
                logo: require('@/assets/logo_top.png')
            },
            safeData: [{
                    safe: require('@/assets/safe1.png'),
                    value: '诚信保障'
                }, {
                    safe: require('@/assets/safe2.png'),
                    value: '企业认证'
                },
                {
                    safe: require('@/assets/safe3.png'),
                    value: '安全交易'
                }
            ]
        }
    },
    methods: {
        clickLogin() {
            this.$router.push({name:'login'})
        },
        clickHome() {
            this.$router.push({name:'home'})
        }
    },
}
</script>

<style lang="less" scoped>
.header {
    width: 100%;
    background-color: #F2F2F2;

    //  顶部导航
    .header-top {
        width: 100%;
        padding: 0 120px;
        height: 38px;
        line-height: 38px;

        .header-login {
            display: flex;
            display: -webkit-flex;
            display: -ms-flex;
            display: -moz-flex;

            :nth-child(3) {
                color: #D92410;
            }

            cursor:pointer;

            .border {
                width: 1px;
                height: 18px;
                background-color: #dbdbdb;
                margin: 9px 15px;
            }
        }

        .header-list {
            ul {
                display: flex;
                display: -webkit-flex;
                display: -ms-flex;
                display: -moz-flex;

                :nth-child(1) {
                    vertical-align: middle;

                    img {
                        padding-right: 5px;
                    }
                }

                li {
                    margin: 0 15px;
                    cursor: pointer;
                }

                .border {
                    width: 1px;
                    height: 18px;
                    background-color: #dbdbdb;
                    margin: 9px;
                }
            }

        }
    }

    //    logo
    .header-logo {
        width: 100%;
        height: 90px;
        background-color: #fff;

        .logo {
            margin-left: 63px;
            display: flex;
            display: -webkit-flex;
            display: -ms-flex;
            display: -moz-flex;
            align-items: center;
            line-height: 90px;

            .border {
                width: 2px;
                height: 38px;
                background-color: #e3e3e3;
                margin: 0 30px;
            }

            p {
                font-size: 20px;
                color: #333;
            }
        }

        .service {
            margin-right: 120px;

            ul {
                display: flex;
                display: -webkit-flex;
                display: -ms-flex;
                display: -moz-flex;
                align-items: center;

                li {
                    margin-left: 40px;
                    margin-top: 10px;
                    cursor: pointer;

                    p {
                        font-size: 12px;
                        color: #666;
                    }
                }

            }
        }
    }

}
</style>
